---
title: React Horizontal Line (HR) - Flowbite
description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
---

The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.

## Default HR

Use this example to separate text content with a `<hr />` horizontal line.

<Example name="hr.root" />

## Trimmed

Use this example to show a shorter version of the horizontal line.

<Example name="hr.trimmed" />

## Icon HR

This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.

<Example name="hr.icon" />

## HR with Text

Use this example to add a text in the middle of the HR component.

<Example name="hr.text" />

## HR Shape (square)

This example can be used to separate content with an HR tag as a shape instead of a line.

<Example name="hr.square" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="hr" />

## References

- [Flowbite HR](https://flowbite.com/docs/typography/hr/)
